<template>
	<view class="goods-box"
		@click.stop="$tools.go(`/pages/goods/index?id=${info.id}`)">
		<view class="img-box">
			<image class="gimg" :src="$imgUrl + info.thumb" lazy-load />
			<view class="sell-out" v-if="info.stock==2">
				该商品已售罄,加急补货中
			</view>
		</view>
		<view class="gname">
			{{ info.name }}
		</view>
		<view class="gprice mprice">
			<text class="pi">¥</text>
			<text class="pnum">{{ info.activity_price }}</text>
			<text class="pip" v-if="info.sell">¥{{ info.sell }}</text>
		</view>

		<view class="tag-list" v-if="info.act_tag && info.act_tag.length > 0">
			<view class="act-text text-ellipsis1" v-for="(ta, t) in info.act_tag" :key="t">{{ ta }} </view>
		</view>
	</view>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const props = defineProps({
	info: { type: Object, default: {} }
})
const { info } = toRefs(props)

const emits = defineEmits(['imgLoad'])
onMounted(() => {
	proxy.$nextTick(() => {
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(proxy)
			query
				.select(".goods-box")
				.boundingClientRect((res) => {
					emits('imgLoad', res.height)
				})
				.exec()
		},20)
	})
})


</script>

<style lang="scss" scoped>
.goods-box {
	width: 100%;
	border-radius: 20rpx;

	.img-box {
		width: 100%;
		padding-top: 100%;
		position: relative;

		.gimg {
			width: 300rpx;
			height: 300rpx;
			position: absolute;
			left: 50%;
			top: 0;
			margin-left: -150rpx;
		}

		.sell-out{
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			line-height: 44rpx;
			background-color: rgba($color: #b8b2b2, $alpha: 0.2);
			color: #999;
			font-size: 20rpx;
			text-align: center;
		}
	}

	.gname {
		padding: 10rpx 20rpx 16rpx;
		word-break: break-all;
		font-size: 24rpx;
	}

	.gprice {
		padding: 0 20rpx 16rpx;
		word-break: break-all;
		display: flex;
		align-items: center;
		// color: $main_color;

		.pi {
			font-size: 20rpx;
			font-weight: bold;
			margin-right: 6rpx;
		}

		.pnum {
			font-size: 30rpx;
			font-weight: bold;
		}

		.pip {
			text-decoration: line-through;
			color: #999;
			margin-left: 12rpx;
			font-size: 22rpx;
			position: relative;
			top: 2rpx;
		}
	}

	.tag-list {
		width: 100%;
		height: auto;
		padding: 0 20rpx 16rpx;

		.act-text {
			margin-bottom: 6rpx;
			max-width: 280rpx;
			height: 34rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			display: inline-block;
			font-size: 20rpx;
			background: #fff6f6;
			border: 1px solid #fff6f6;
			color: #f00;
			padding: 0 8rpx;
			margin-right: 10rpx;
			border-radius: 4rpx;
		}
	}


}
</style>
